<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<html>
<head>
    <title>员工列表</title>
    <style>
        body { font-family: Arial, sans-serif; background-color: #f5f5f5; }
        .container { width: 90%; margin: 0 auto; }
        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        h1 { color: #333; }
        .btn { padding: 10px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; }
        .btn:hover { background-color: #45a049; }
        table { width: 100%; border-collapse: collapse; background: white; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
        th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd; }
        th { background-color: #4CAF50; color: white; }
        tr:hover { background-color: #f5f5f5; }
        .pagination { display: flex; justify-content: center; margin-top: 20px; }
        .pagination a { display: inline-block; padding: 8px 16px; text-decoration: none; color: #333; border: 1px solid #ddd; margin: 0 4px; }
        .pagination a.active { background-color: #4CAF50; color: white; border: 1px solid #4CAF50; }
        .pagination a:hover:not(.active) { background-color: #ddd; }
        .info-bar { margin: 10px 0; color: #666; font-size: 14px; }
        .nav-links { display: flex; gap: 10px; margin-bottom: 20px; }
        .nav-link { padding: 8px 15px; background: #2196F3; color: white; text-decoration: none; border-radius: 4px; }

        .btn-edit, .btn-delete {
            padding: 5px 10px;
            text-decoration: none;
            border-radius: 3px;
            font-size: 14px;
            display: inline-block;
            margin-right: 5px;
        }

        .btn-edit {
            background-color: #2196F3;
            color: white;
        }

        .btn-delete {
            background-color: #f44336;
            color: white;
        }

        .btn-edit:hover {
            background-color: #0b7dda;
        }

        .btn-delete:hover {
            background-color: #da190b;
        }
        /* 搜索框样式 */
        .search-bar {
            display: flex;
            margin-right: 20px;
        }

        .search-bar input[type="text"] {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
        }

        .search-bar button {
            padding: 8px 15px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }

        /* 头部操作区域 */
        .header-actions {
            display: flex;
            align-items: center;
        }

        .btn-logout {
            background-color: #f44336 !important;
            margin-left: 10px;
        }
    </style>
</head>
<body>

<div class="header">
    <h1>员工列表</h1>
    <div class="header-actions">
        <div class="search-bar">
            <form action="employeeInfo" method="get">
                <input type="text" name="id" placeholder="查询员工 ID">
                <button type="submit">查询</button>
            </form>
        </div>
        <c:if test="${isAdmin}">
            <a href="addEmployee" class="btn">添加新员工</a>
        </c:if>
        <a href="logout" class="btn btn-logout">退出登录</a>
    </div>
</div>
<div class="container">
    <div class="nav-links">
        <a href="employees" class="nav-link">员工</a>
        <a href="departments" class="nav-link">部门</a>
        <a href="salaries" class="nav-link">工资</a>
    </div>

    <div class="header">
        <h1>员工列表</h1>
        <a href="addEmployee" class="btn">添加新员工</a>
    </div>

    <div class="info-bar">
        全部员工: ${totalEmployees} |
        展示: ${(currentPage - 1) * 5 + 1} -
        ${(currentPage * 5) > totalEmployees ? totalEmployees : (currentPage * 5)}
        of ${totalEmployees}
    </div>

    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>部门</th>
            <th>职位</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${employees}" var="emp">
            <tr>
                <td>${emp.id}</td>
                <td>${emp.name}</td>
                <td><c:choose>
                    <c:when test="${emp.gender == 'Male'}">男</c:when>
                    <c:when test="${emp.gender == 'Female'}">女</c:when>
                    <c:when test="${emp.gender == 'Other'}">其他</c:when>
                </c:choose></td>
                <td>${emp.age}</td>
                <td>${emp.deptName}</td>
                <td>${emp.position}</td>
                <td>
                    <a href="editEmployee?id=${emp.id}" class="btn-edit">编辑</a>
                    <a href="deleteEmployee?id=${emp.id}" class="btn-delete"
                       onclick="return confirm('你确定删除这个员工吗?')">删除</a>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>

    <div class="pagination">
        <c:if test="${currentPage > 1}">
            <a href="employees?page=1">&laquo; First</a>
            <a href="employees?page=${currentPage - 1}">&lsaquo; Prev</a>
        </c:if>

        <c:forEach begin="1" end="${totalPages}" var="i">
            <c:choose>
                <c:when test="${i == currentPage}">
                    <a href="#" class="active">${i}</a>
                </c:when>
                <c:otherwise>
                    <a href="employees?page=${i}">${i}</a>
                </c:otherwise>
            </c:choose>
        </c:forEach>

        <c:if test="${currentPage < totalPages}">
            <a href="employees?page=${currentPage + 1}">Next &rsaquo;</a>
            <a href="employees?page=${totalPages}">Last &raquo;</a>
        </c:if>
    </div>
</div>
</body>
</html>
